<script type="text/javascript">
  $(document).ready(function() {

    $('#booking-form').validate({

      submitHandler: function() {

        $.ajax({
          url: '<?php echo url_for('home/submitBooking') ?>',
          data: $('#booking-form').serialize(),
          type: 'POST',
          beforeSend: function() {
            $('#booking-form-loader').css('visibility','visible');
          },
          success: function(data) {
            $('#booking-form-loader').css('visibility','hidden');
            alert(data);
          }
        })

      }

    });

		$( "#datepicker" ).attr("style","top:890px;");
		$( "#datepicker" ).datepicker({
			showOn: "button",
			buttonImage: "/images/date-icon.jpg",
			buttonImageOnly: true,
      onSelect: function(dateText) {
        var splitDate = dateText.split('/');
        jQuery('select#demo_month').val(splitDate[0]);
        jQuery('select#demo_day').val(splitDate[1]);
        jQuery('select#demo_year').val(splitDate[2]);
      }
		});

  });
</script>

<div id="book-now-content">
  <div class="header-popup">Experience M2M Solutions, book a demo today.</div>
  <div class="content-popup">
    <p>
      <strong>
      Allow us to introduce you to the latest technology that will help you control your business, your way. With
      Globe Business’ M2M Solutions, you can automate your processes and let your machines do the work for you!
      </strong>
    </p>
    <p>
      <strong>Experience M2M Solutions today. Fill in the following to book your free demo.</strong>
    </p>
    <div class="left" style="width:310px;margin-left:20px;">
      <form id="booking-form">
        <label>* Your name:</label>
        <div class="clear"></div>
        <input type="text" name="name" value="" class="required inp" />
        <div class="clear"></div>
        <label>* Email:</label>
        <div class="clear"></div>
        <input type="text" name="email" value="" class="required email inp" />
        <div class="clear"></div>
        <label>* Name of your company:</label>
        <div class="clear"></div>
        <input type="text" name="company" value="" class="required inp" />
        <div class="clear"></div>
        <label>* Mobile number:</label>
        <div class="clear"></div>
        <input type="text" name="mobile_number" value="" class="required digits inp" />
        <div class="clear" style="height:10px;"></div>
        <label>* Preferred demo schedule:</label>

        <div class="clear"></div>
        <div style="width:260px;">
          <div class="left">
            <select style="padding-bottom: 7px;" id="demo_month" class="select" name="demo[month]">
              <?php $month = range(1,12) ?>
              <?php $year = date('Y') ?>
              <?php foreach($month as $i) :?>
              <option value="<?php echo date('m',strtotime($year."-".$i."-01")) ?>">
                <?php echo date('M', strtotime($year."-".$i."-01")) ?>
              </option>
              <?php endforeach; ?>
            </select>&nbsp;
            <select style="padding-bottom: 7px;" id="demo_day" class="select" name="demo[day]">
              <?php $dayRange = range(1,31) ?>
              <?php foreach($dayRange as $day) : ?>
              <?php $day = ($day < 10) ? '0'.$day : $day ?>
              <option value="<?php echo $day ?>"><?php echo $day ?></option>
              <?php endforeach; ?>
            </select>
            <select style="padding-bottom: 7px;" id="demo_year" class="select" name="demo[year]">
              <?php $yearRange = range(date('Y'),date('Y')+5); ?>
              <?php foreach($yearRange as $year) : ?>
              <option value="<?php echo $year ?>"><?php echo $year ?></option>
              <?php endforeach; ?>
            </select>
          </div>
          <div class="right" style="margin:8px 0 0 0;">
            <input type="hidden" id="datepicker" />
          </div>
        </div>

        <div class="clear"></div>

        <select style="padding-bottom: 7px;" class="select" name="demo[hour]">
          <?php $hourRange = range(1,12) ?>
          <?php foreach($hourRange as $hour) : ?>
          <?php $hour = ($hour < 10) ? '0'.$hour : $hour ?>
          <option value="<?php echo $hour ?>"><?php echo $hour ?></option>
          <?php endforeach; ?>
        </select>:
        <select style="padding-bottom: 7px;" class="select" name="demo[minute]">
          <?php $minuteRange = range(0,59) ?>
          <?php foreach($minuteRange as $minute) : ?>
          <?php $minute = ($minute < 10) ? '0'.$minute : $minute ?>
          <option value="<?php echo $minute ?>"><?php echo $minute ?></option>
          <?php endforeach; ?>
        </select>
        <select style="padding-bottom: 7px;" class="select" name="demo[period]">
          <option value="AM">AM</option>
          <option value="PM">PM</option>
        </select>

        <div class="clear" style="height:10px;"></div>
        <label>* What time of the day are you available for us to contact you?:</label>

        <div class="clear"></div>

        <select style="padding-bottom: 7px;" class="select" name="contact[hour]">
          <?php $hourRange = range(1,12) ?>
          <?php foreach($hourRange as $hour) : ?>
          <?php $hour = ($hour < 10) ? '0'.$hour : $hour ?>
          <option value="<?php echo $hour ?>"><?php echo $hour ?></option>
          <?php endforeach; ?>
        </select>:
        <select style="padding-bottom: 7px;" class="select" name="contact[minute]">
          <?php $minuteRange = range(0,59) ?>
          <?php foreach($minuteRange as $minute) : ?>
          <?php $minute = ($minute < 10) ? '0'.$minute : $minute ?>
          <option value="<?php echo $minute ?>"><?php echo $minute ?></option>
          <?php endforeach; ?>
        </select>
        <select style="padding-bottom: 7px;" class="select" name="contact[period]">
          <option value="AM">AM</option>
          <option value="PM">PM</option>
        </select>

        <div class="clear" style="height:10px;"></div>
        <img src="/images/loader.gif" id="booking-form-loader" style="visibility: hidden" />
        <input type="submit" name="submit" value="Submit" class="general-2" />
        <div class="clear"></div>
      </form>
    </div>
    <div class="right bg-book">
      <p>
        <strong >The Demo will take place at:</strong><br />
        Globe Telecom&rsquo;s Valero Telepark Building,<br />
        111 Valero St., Salcedo Village, Makati City.
      </p>
      <iframe width="240" height="170" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Globe+Telecom%E2%80%99s+Valero+Telepark+Building,&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=40.953203,93.076172&amp;vpsrc=6&amp;ie=UTF8&amp;hq=Globe+Telecom%E2%80%99s+Valero+Telepark+Building,&amp;hnear=&amp;radius=15000&amp;ll=14.559594,121.018666&amp;spn=0.049013,0.090895&amp;z=14&amp;iwloc=A&amp;cid=17229612152295379676&amp;output=embed"></iframe>
      <div class="clear" style="height:320px;"></div>
    </div>
    <div class="clear"></div>
  </div>
  <div class="footer-popup">
    <a href=""><img src="/images/globe-biz-logo-sm.jpg" alt="" width="87" height="40" border="0" class="left" /></a>
    <img src="/images/logo-dark.jpg" alt="" width="213" height="40" border="0" class="right" />
  </div>
</div>


<!--<div id="book-now-content">
  <div class="header-popup">book now</div>
  <p><strong>This content comes from a hidden element on this page.</strong></p>

  <form id="booking-form">
    <p>
      <label for="name">* Your Name:</label><br />
      <input type="text" name="name" value="" class="required inp" />
    </p>
    <p>
      <label for="email">* Email:</label><br />
      <input type="text" name="email" value="" class="required email inp" />
    </p>
    <p>
      <label for="company">* Name of your Company:</label><br />
      <input type="text" name="company" value="" class="required inp" />
    </p>
    <p>
      <label for="mobile_number">* Mobile Number:</label><br />
      <input type="text" name="mobile_number" value="" class="required digits inp" />
    </p>
    <p>
      <label>* Preffered Demo Schedule</label><br />
      <select name="demo_month">
        <?php $month = range(1,12) ?>
        <?php $year = date('Y') ?>
        <?php foreach($month as $i) :?>
        <option value="<?php echo date('m',strtotime($year."-".$i."-01")) ?>">
          <?php echo date('F', strtotime($year."-".$i."-01")) ?>
        </option>
        <?php endforeach; ?>
      </select>
      <select name="demo_day">
        <?php $dayRange = range(1,31) ?>
        <?php foreach($dayRange as $day) : ?>
        <?php $day = ($day < 10) ? '0'.$day : $day ?>
        <option value="<?php echo $day ?>"><?php echo $day ?></option>
        <?php endforeach; ?>
      </select>
      <select name="demo_year">
        <?php $yearRange = range(date('Y'),date('Y')+5); ?>
        <?php foreach($yearRange as $year) : ?>
        <option value="<?php echo $year ?>"><?php echo $year ?></option>
        <?php endforeach; ?>
      </select><br />

      <select name="demo_hour">
        <?php $hourRange = range(1,12) ?>
        <?php foreach($hourRange as $hour) : ?>
        <?php $hour = ($hour < 10) ? '0'.$hour : $hour ?>
        <option value="<?php echo $hour ?>"><?php echo $hour ?></option>
        <?php endforeach; ?>
      </select>
      :
      <select name="demo_minute">
        <?php $minuteRange = range(1,59) ?>
        <?php foreach($minuteRange as $minute) : ?>
        <?php $minute = ($minute < 10) ? '0'.$minute : $minute ?>
        <option value="<?php echo $minute ?>"><?php echo $minute ?></option>
        <?php endforeach; ?>
      </select>
      <select name="demo_period" class="inp">
        <option value="AM">AM</option>
        <option value="PM">PM</option>
      </select>
    </p>
    <p>
      <label>* Available time for contact:</label><br />
      <select name="contact_hour">
        <?php $hourRange = range(1,12) ?>
        <?php foreach($hourRange as $hour) : ?>
        <?php $hour = ($hour < 10) ? '0'.$hour : $hour ?>
        <option value="<?php echo $hour ?>"><?php echo $hour ?></option>
        <?php endforeach; ?>
      </select>
      :
      <select name="contact_minute">
        <?php $minuteRange = range(1,59) ?>
        <?php foreach($minuteRange as $minute) : ?>
        <?php $minute = ($minute < 10) ? '0'.$minute : $minute ?>
        <option value="<?php echo $minute ?>"><?php echo $minute ?></option>
        <?php endforeach; ?>
      </select>
      <select name="contact_period">
        <option value="AM">AM</option>
        <option value="PM">PM</option>
      </select>
    </p>
    <p>
      <input type="submit" value="Submit" />
    </p>


  </form>

  <div class="footer-popup">
    <a href=""><img src="/images/globe-biz-logo-sm.jpg" alt="" width="87" height="40" border="0" class="left" /></a>
    <img src="/images/logo-dark.jpg" alt="" width="213" height="40" border="0" class="right" />
  </div>
</div>
-->